<template>
  <div>
    <!--最外层卡片开始-->
    <el-card style="width: 100%;margin:10px ;height: 600px">
      <!--控制展开和收起的div开始-->
      <div :style="height" id="div1">

        <!--第一行输入框开始-->
        <el-row style="margin: 20px 0">
          <el-col span="6" class="col">
            <span>单据编号:</span>
            <el-input  style="width: 70%"  placeholder="请输入单据编号"></el-input>
          </el-col>

          <el-col span="6">
            <span>商品信息:</span>
            <el-input  style="width: 70%" placeholder="请输入条码、名称、规格、型号"></el-input>
          </el-col >

          <el-col span="6" class="col">
            <span>单据日期:</span>
            <el-date-picker
                style="width: 70%"
                v-model="value1"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
            </el-date-picker>
          </el-col>

          <el-col span="6" class="col">
            <a style="line-height:38px;border-radius:4px;display:inline-block;
                  background-color:#1890ff;color:white;text-align:center;width:43px;
                  height:38px" href="">查询</a>
            <a style="margin: 0 0 0 8px;display:inline-block;text-align:center;width:43px;
                  height:38px;border-radius:4px;border: 1px solid blue;line-height:38px;" href="">重置</a>
            <!--控制展开和收起部分-->
            <a  @click="expand()" style="cursor: pointer;color: #1890ff">{{dj}}</a>
            <el-button style="background-color: white;padding-left:0;color: #1890ff;border: 0" :icon="dp"></el-button>
          </el-col>
        </el-row>
        <!--第一行输入框结束-->

        <!--第二行输入框开始-->
        <el-row style="margin: 20px 0">
          <el-col :span="6" class="col">
            <span >仓库名称:</span>
            <template>
              <el-select style="width: 70%" filterable v-model="value2">
                <el-option
                    v-for="item in options2"
                    :key="item.value2"
                    :label="item.label2"
                    :value="item.value2">
                </el-option>
              </el-select>
            </template>
          </el-col>

          <el-col span="6" class="col">
            <span>操作员:</span>
            <el-select style="width: 75%" filterable v-model="value3">
              <el-option
                  v-for="item in options3"
                  :key="item.value3"
                  :label="item.label3"
                  :value="item.value3">
              </el-option>
            </el-select>
          </el-col>

          <el-col span="6" class="col">
            <span>单据状态:</span>
            <el-select style="width: 70%" filterable v-model="value4">
              <el-option
                  v-for="item in options4"
                  :key="item.value4"
                  :label="item.label4"
                  :value="item.value4">
              </el-option>
            </el-select>
          </el-col>

          <el-col span="6" class="col">
            <span style="margin-left: -13px">单据备注:</span>
            <el-input  style="width: 75%" placeholder="请输入单据备注"></el-input>
          </el-col >
        </el-row>
        <!--第二行输入框结束-->
      </div>
      <!--控制展开和收起的div结束-->

      <!--第三行开始-->
      <!--新增部分开始-->
      <el-row style="margin: 10px 0">
        <template>
          <el-button  style="line-height:12px;border-radius:4px;display:inline-block;
                      background-color:#1890ff;color:white;text-align:center;width: 75px;height: 38px;
                      margin: 0 8px 8px 0;"
                      type="text" @click="outerVisible = true">+新增</el-button>

          <el-dialog title="新增" :visible.sync="outerVisible">
            <!--新增第一行开始-->
            <el-row style="margin: 10px 0">
              <el-col :span="12" class="col">
                <span style="color: red">*</span>
                <span>单据日期</span>
                <el-date-picker
                    style="width: 70%;"
                    v-model="value1"
                    type="datetime"
                    placeholder="datetime">
                </el-date-picker>
              </el-col>

              <el-col :span="12" class="col">
                <span>单据编号:</span>
                <el-input  style="width: 70%"  placeholder="ZZD00000274575"></el-input>
              </el-col>

            </el-row>
            <!--新增第一行结束-->

            <!--新增第二行开始-->
            <el-row style="margin: 10px 0">
              <el-col :span="6" style="width: 9%">
                <el-button  style="line-height:12px;border-radius:4px;display:inline-block;
                      background-color:#1890ff;color:white;text-align:center;width: 75px;height: 38px;
                      margin: 0 8px 8px 0;"
                            type="text" @click="outerVisible = true">+新增行</el-button>
              </el-col>

              <el-col :span="9" :style="width1">
                <el-input style="width: 185px" :style=display :placeholder=kl ></el-input>
                <el-button  style="margin: 0 0 0 8px;display:inline-block;text-align:center;width:100px;
                  height:38px;border-radius:4px;border: 1px solid blue;line-height:15px;" @click="expand1()">
                  {{kd}}</el-button>
              </el-col>

              <el-col :span="9" style="width: 10%">
                <el-dropdown>
                  <el-button plain>
                    仓库操作
                    <svg t="1654231867884"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         p-id="2287" width="12" height="12">
                      <path
                          d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                          p-id="2288" fill="#409EFF"></path>
                    </svg>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-s-tools">批量设置</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">新增仓库</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
            <el-dialog
                width="30%"
                title="批量设置仓库"
                :visible.sync="innerVisible"
                append-to-body>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <el-button icon="el-icon-s-tools" type="primary" @click="innerVisible = true">批量设置</el-button>
            </div>
            <el-dialog
                width="30%"
                title="新增仓库"
                :visible.sync="innerVisible"
                append-to-body>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <el-button icon="el-icon-plus" type="primary" @click="innerVisible = true">新增仓库</el-button>
            </div>
            <!--新增第二行结束-->

            <!--新增第三行开始-->
            <el-table
                border
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="50">
              </el-table-column>
              <el-table-column
                  label="商品类型"
                  width="100">
              </el-table-column>
              <el-table-column
                  label="仓库名称"
                  width="100">
              </el-table-column>
              <el-table-column
                  label="单据日期"
                  width="100">
              </el-table-column>
              <el-table-column
                  label="条码"
                  width="70">
              </el-table-column>
              <el-table-column
                  label="名称"
                  width="70">
              </el-table-column>
              <el-table-column
                  label="规格"
                  width="70">
              </el-table-column>
              <el-table-column
                  label="库存"
                  min-width="70">
              </el-table-column>
              <el-table-column
                  label="单位"
                  min-width="70">
              </el-table-column>
              <el-table-column
                  label="数量"
                  min-width="70">
              </el-table-column>
              <el-table-column
                  label="单价"
                  min-width="70">
              </el-table-column>
              <el-table-column
                  label="金额"
                  min-width="70">
              </el-table-column>
              <el-table-column
                  label="备注"
                  min-width="70">
              </el-table-column>
            </el-table>
            <!--新增第三行结束-->

            <!--新增第四行开始-->
            <el-row style="margin: 10px 0">
              <el-col :span="24">
                <el-input
                    type="textarea"
                    :rows="1"
                    placeholder="请输入备注"
                    v-model="textarea">
                </el-input>
              </el-col>
            </el-row>
            <!--新增第四行结束-->

            <!--新增第五行开始-->
            <div style="margin: 10px 0 10px 100px">
              <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                <span>附件:</span>
                <el-button icon="el-icon-upload2" style="background-color: white;color: black" size="small" type="primary" >点击上传</el-button>
              </el-upload>
            </div>
            <!--新增第五行结束-->

            <!--新增第六行开始-->
            <div style="margin: 100px 0 0 590px">
              <el-button @click="outerVisible = false">取 消</el-button>
              <el-button>保存并审核</el-button>
              <el-button>保 存</el-button>
            </div>
            <!--新增第六行结束-->
          </el-dialog>
        </template>
        <!--新增部分结束-->

        <!--批量操作部分开始-->
        <el-dropdown>
          <el-button plain>
            批量操作
            <svg t="1654231867884"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2287" width="12" height="12">
              <path
                  d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                  p-id="2288" fill="#409EFF"></path>
            </svg>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">审核</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-close">反审核</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--批量操作部分结束-->

        <!--问号部分开始-->
        <span style="margin-left: 1100px">
          <svg viewBox="64 64 896 896" data-icon="question-circle"
               width="1em" height="1em" fill="currentColor" aria-hidden="true"
               focusable="false" class="">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
            </path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z">
          </path>
          </svg>
        </span>
        <!--批量操作部分结束-->
      </el-row>
      <!--第三行结束-->

      <!--表格部分开始-->
      <el-table
          border
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="100">
        </el-table-column>
        <el-table-column
            label="单据编号"
            width="200">
          <template slot-scope="scope">{{ scope.row.number}}</template>
        </el-table-column>
        <el-table-column
            label="商品信息"
            width="300">
          <template slot-scope="scope">{{ scope.row.info}}</template>
        </el-table-column>
        <el-table-column
            label="单据日期"
            width="200">
          <template slot-scope="scope">{{ scope.row.date}}</template>
        </el-table-column>
        <el-table-column
            label="操作员"
            width="100">
          <template slot-scope="scope">{{ scope.row.operator}}</template>
        </el-table-column>
        <el-table-column
            label="金额合计"
            width="100">
          <template slot-scope="scope">{{ scope.row.amount}}</template>
        </el-table-column>
        <el-table-column
            label="状态"
            width="100">
          <template slot-scope="scope">{{ scope.row.state}}</template>
        </el-table-column>
        <el-table-column
            label="操作"
            min-width="100">
        </el-table-column>
      </el-table>
      <!--表格部分结束-->
    </el-card>
    <!--最外层卡片结束-->
  </div>
</template>

<script>
export default {
  name: "AssemblyList",
  data() {
    return {
      options1: [{
        value1: '',
        label1: ''
      }],
      options2: [{
        value2: '',
        label2: ''
      }],
      options3: [{
        value3: '',
        label3: ''
      }],
      options4: [{
        value4: '',
        label4: ''
      }],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      height:'height: 120px',
      dj : '展开',
      dp : 'el-icon-arrow-down',
      tableData: [],
      outerVisible: false,
      innerVisible: false,
      fileList: [],
      width1:'width1:0px',
      kd:'扫码录入',
      kl:'',
      display:'display:none',
      textarea: ''
    }
  },methods:{
    expand(){
      if (this.height==='height: 120px'){
        this.height = 'height: 60px'
        this.dj = '展开'
        this.dp = 'el-icon-arrow-down'
      }else {
        this.height = 'height: 120px'
        this.dj = '收起'
        this.dp = 'el-icon-arrow-up'
      }
    },
    expand1(){
      if (this.width1==='width1:100px'){
        this.width1 = 'width1:285px'
        this.kd = '扫码录入'
        this.kl = ''
        this.display='none'
      }else {
        this.width1 = 'width1: 100px'
        this.kd = '收起扫码'
        this.kl = '请扫码商品条码并回车'
        this.display='inline-block;'
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  padding: 0 15px
}
.col{
  padding: 0 12px;
}
span{
  font-size: 14px;
  margin: 0 20px 0 0;
}
#div1 {
  padding: 18px 0;
  overflow: hidden;
  transition: all 0.5s;
}
</style>
